<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Welcome to GooWhere.</title>
        <style type="text/css">td img {display: block;}</style>
        <script src="GUI/add_on/image_rollover.js" type="text/javascript"></script>
        <link href="GUI/add_on/login.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="/GooWhere/json.js"></script>
        <script type="text/javascript">

            var name;
            var pw;

            function login(){
                name = document.getElementById('username').value;
                pw = document.getElementById('password').value;
                getLogin(name,pw);
            }

            function getLogin(userName, passWord){
                //Goes to servlet and get the username and password associated with the player.
                var url = "PlayerSigninServelet?userName=" + userName + "&passWord=" +passWord;
                if (typeof XMLHttpRequest != "undefined") {
                    req = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                req.open("GET", url, true);
                req.onreadystatechange = loginrequestcallback;
                req.send(null);
            }

            function loginrequestcallback() {
                showLoadingWindow();
                if (req.readyState == 4) {
                    var response = req.responseText.parseJSON();
                    if (response.length>0) {
                        var returnedname=response[0]["userName"];
                        var returnedpass=response[0]["passWord"];

                        //logs in user once username and password match
                        if(returnedpass==pw){
                            //alert("Welcome back to GooWhere, "+returnedname+"!");
                            location.href = '/GooWhere/index.jsp';
                            closeLoadingWindow();
                        }
                        //determines user does not exist in database
                        else if (returnedname=="INVALID"){
                            /*alert(name+" is not a valid username in our database! Would you like to create an account with this username?"); */
                            closeLoadingWindow();
                            showMessageWindow();
                            document.getElementById("message").innerHTML = name+" is not a valid username in our database! Please try again.";
                        }
                        //handles incorrect capital or lowercase instances of password entry because mySQL doesn't differentiate case
                        else if (returnedpass!=pw){
                            /*alert("Incorrect password! Are you sure you're "+name+"? If so, please try again."); */
                            closeLoadingWindow();
                            showMessageWindow();
                            document.getElementById("message").innerHTML = "Incorrect password! Are you sure you're "+name+"? If so, please try again.";
                        }
                        //user exists in the database but an incorrect password has been entered
                    }else{
                        /*alert("Incorrect password! Are you sure you're "+name+"? If so, please try again."); */
                        closeLoadingWindow();
                        showMessageWindow();
                        document.getElementById("message").innerHTML = "Incorrect password! Are you sure you're "+name+"? If so, please try again.";
                    }

                }
            }

            //copied from view-source:http://jennifermadden.com/javascript/stringEnterKeyDetector.html
            function checkEnter(e){
                var characterCode
                if(e && e.which){
                    e = e
                    characterCode = e.which
                }
                else{
                    e = event
                    characterCode = e.keyCode
                }
                if(characterCode == 13){
                    //document.getElementById("btn_login").click();
                    login();
                }
            }


            function showRegisterWindow()
            {
                closeRegMessage();
                document.getElementById("reg_window_bg").style.display = 'block';
                document.getElementById("reg_window").style.display = 'block';
            }
            function closeRegisterWindow()
            {
                closeRegMessage();
                document.getElementById("reg_window_bg").style.display = 'none';
                document.getElementById("reg_window").style.display = 'none';
            }
            function showMessageWindow()
            {
                document.getElementById("reg_window_bg").style.display = 'block';
                document.getElementById("message_window").style.display = 'block';
            }
            function closeMessageWindow()
            {
                document.getElementById("message").innerHTML = "";
                document.getElementById("reg_window_bg").style.display = 'none';
                document.getElementById("message_window").style.display = 'none';
            }
            function showLoadingWindow()
            {
                document.getElementById("loading_window").style.display = 'block';
                document.getElementById("reg_window_bg").style.display = 'block';
            }
            function closeLoadingWindow()
            {
                document.getElementById("loading_window").style.display = 'none';
                document.getElementById("reg_window_bg").style.display = 'none';
            }

        </script>
    </head>

    <body onload="MM_preloadImages('GUI/images/login/login_menu_over_r1_c1.png','GUI/images/login/login_menu_over_r1_c2.png','GUI/images/login/login_menu_over_r1_c3.png','GUI/images/login/btn_login_over.png')">
<div id="map"><img src="GUI/images/login/map.png" /></div>
<div id="logo"><img src="GUI/images/login/logo.png" /></div>
<div id="game_logo"><img src="GUI/images/login/game_logo.png" /></div>
<div id="menu">
<table border="0" cellpadding="0" cellspacing="0" width="258">
<!-- fwtable fwsrc="top_menu.png" fwpage="Page 1" fwbase="login_menu.png" fwstyle="Dreamweaver" fwdocid = "2124152298" fwnested="0" -->
  <tr>
   <td><img src="GUI/images/login/spacer.gif" width="86" height="1" border="0" alt="" /></td>
   <td><img src="GUI/images/login/spacer.gif" width="78" height="1" border="0" alt="" /></td>
   <td><img src="GUI/images/login/spacer.gif" width="94" height="1" border="0" alt="" /></td>
   <td><img src="GUI/images/login/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_home','','GUI/images/login/login_menu_over_r1_c1.png',1)"><img src="GUI/images/login/login_menu_r1_c1.png" name="btn_home" width="86" height="41" border="0" id="btn_home" /></a></td>
   <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_about','','GUI/images/login/login_menu_over_r1_c2.png',1)"><img src="GUI/images/login/login_menu_r1_c2.png" name="btn_about" width="78" height="41" border="0" id="btn_about" /></a></td>
   <td><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_support','','GUI/images/login/login_menu_over_r1_c3.png',1)"><img src="GUI/images/login/login_menu_r1_c3.png" name="btn_support" width="94" height="41" border="0" id="btn_support" /></a></td>
   <td><img src="GUI/images/login/spacer.gif" width="1" height="41" border="0" alt="" /></td>
  </tr>
</table>
</div>
<div id="credit"><img src="GUI/images/login/credit.png" /></div></center>
<div id="txt_username">
<form id="form_username" name="form_username" method="post" action="">
    <input type="text" name="username" id="username" value="Player name"/>
</form>
</div>
<div id="txt_password">
<form id="form_password" name="form_password" method="post" action="">
    <input type="text" name="password" id="password" value="Password"/>
</form>
</div>
<div id="btn_login"><a href="#" onclick="login()" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btn_login','','GUI/images/login/btn_login_over.png',1)"><img src="GUI/images/login/btn_login.png" name="btn_login" width="99" height="34" border="0" id="btn_login2" /></a></div>
<div id="password_recover"><a href="#" class="links">Forget your password?</a></div>
<div id="get_acct" class="get_acct">Don't have an account yet? <a href="#" class="links" onmouseover="MM_swapImage();this.style.cursor='pointer';" onclick="showRegisterWindow()">Get it here.</a></div>
<!-- includes -->
<div id="reg_window_bg" style="display:none">
<table height="100%" width="100%" background="GUI/images/register/bg.png" /></table>
</div>
<div id="reg_window" style="display:none"><%@include file="GUI/register.jsp" %></div>
<div id="message_window" style="display:none"><%@include file="GUI/login_message.jsp" %></div>
<div id="loading_window" style="display:none"><img src="GUI/images/login/goo_load.gif" width="161" height="161" border="0" alt="" /></div>
</body>
</html>